<template>
  <div class="ShouYe">
    
    <hr />
    

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >

    <van-swipe class="my-swipe" v-if="cimgs.length>0" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="v in cimgs" :key="v.id" @click.native="Swipedetail(v.musicId)">
        <img :src="v.carouselUrl">
      </van-swipe-item>
      
    </van-swipe>
        <div class="ind">
          <div class="item" v-for="(v, index) in list" :key="index">
            <img :src="v.avaUrl" @click="detail(v.id)" />
            <p>{{ v.name }}</p>
            <p>￥：{{ v.phone }}</p>
            <mt-button type="primary" @click="add(v)">加入购物车</mt-button>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import url from '../tools/url.js';
import { Header } from "mint-ui";
export default {
  name: "ShouYe",
  components: { Header },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNo: 1,
      isLoading: false,
      cimgs:[],
    };
  },
  methods: {
    //轮播图详情页
    Swipedetail(id){
      this.$router.push({
        path: "/Swipdetail",
        query: {
          musicId:id,
        },
      });
    },
    //下拉刷新
    onRefresh() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios.post(url.GERUSERLIST, str).then((res) => {
        if (res.data.code == 200) {
          this.isLoading = false;
          res.data.data.list.forEach((item, index, arr) => {
            item.count = 1;
            item.ischeck = false;
          });
          this.list = res.data.data.list.concat(this.list);
          if (res.data.data.isLastPage) {
            this.finished = true;
          }
          this.pageNo++;
        }
      });
    },
    //加载更多
    onLoad() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios.post(url.GERUSERLIST, str).then((res) => {
        if (res.data.code == 200) {
          // 加载状态结束
          console.log("加载更多");
          this.loading = false;
          res.data.data.list.forEach((item, index, arr) => {
            item.count = 1;
            item.ischeck = false;
          });
          this.list = this.list.concat(res.data.data.list);
          this.pageNo++;
          if (res.data.data.isLastPage) {
            this.finished = true;
          }
        } else {
          console.log("登录超时");
          this.$router.push("/Login");
        }
      });
    },
    add(v) {
      this.$store.commit("addp", v);
    },
    detail(v) {
      this.$router.push({
        path: "/Detail",
        query: {
          v: v,
        },
      });
    },
  },
  mounted() {
    // var token = sessionStorage.getItem("token");
    // var str = `token=${token}&pageNo=1&pageSize=10`;
    // this.axios.post(url.GERUSERLIST, str).then((res) => {
    //   console.log(res);
    //   res.data.data.list.forEach((item, index, arr) => {
    //     item.count = 1;
    //     item.ischeck = false;
    //   });

    //   this.list = res.data.data.list;
    // });

    //轮播图
    var token = sessionStorage.getItem("token");
    var str = `token=${token}`;
    this.axios.post(url.CAROUSEL, str).then((res) => {
      console.log(res);
      if (res.data.code==200) {
        this.cimgs=res.data.data;
      }else{
        this.$router.push("/Login")
      }
    });
  },
};
</script>
<style scoped>
.ind {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
}
.item {
  width: 33%;
}
.item img {
  width: 100%;
}
.item p{
  text-align:center;
}
.item button{
  background:#FF4400;
  width: 100%;
}
input {
  width: 20px;
}
.my-swipe img{
  width: 100%;
}
.my-swipe{
  margin-top: 40px;
}
</style>
